<template>
  <div class="findBox">
      <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
        <h1 class="animated" v-show="first">TEST</h1>
      </transition>
    <div class="center">
      <input type="text" v-model="text" placeholder="请输入内容">
      <input type="button" value="搜索" @click="search">
    </div>
    <v-history></v-history>
    <v-searchBox></v-searchBox>
  </div>
</template>

<script>
import axios from 'axios'
import searchBox from '../searchBox/searchBox.vue'
import history from '../history/history.vue'

export default{
  data(){
    return {
      first:true,
      text:'',
      data:[]
    }
  },
  methods:{
    search:function (){
      this.$store.state.searchShow=false;
      var _this=this;
      if(_this.text===''){
        this.$toast({message: '请输入内容',
                     position: 'middle',
                     duration: 800})
        return;
      }
      this.$store.commit('addsearchmusic',_this.text);
      this.$store.dispatch("findmusic",this.text);
    }
  },
  components:{
    'v-searchBox':searchBox,
    'v-history':history
  }
}
</script>

<style lang="Sass">
.findBox{
  .center{ width: 100%; height: 1.5rem;

    input[type=text]{width: 80%;height: .8rem; border-radius: .2rem; border:1px solid #3276b1; outline: 0; padding-left: .5rem;}
    input[type=button]{width: 10%;height: .8rem; border-radius: .2rem;  outline: 0; background: #26a2ff; border:none; color: #fff; }
    input[type=button]:active{color: red;}
  }
}
</style>